<div ng-controller="CalendarCtrl" class="buttons">
  <h2>
    <span uib-tooltip="{{startSunday ? 'SETTINGS/CALENDAR/start-sun/tooltip' : 'SETTINGS/CALENDAR/start-mon/tooltip'|translate}}" tooltip-placement="left">
      <i class="glyphicon glyphicon-indent-{{startSunday ? 'left alert-info' : 'right alert-success'}}" ></i>
    </span>
    <li translate-once>SETTINGS/CALENDAR/week/hdr</li>
  </h2>

  <p translate-once>SETTINGS/CALENDAR/start/desc</p>
  <p><strong  translate-once>COMMON/current-setting/hdr</strong>
   {{startSunday ? 'SETTINGS/CALENDAR/start-sun/tooltip' : 'SETTINGS/CALENDAR/start-mon/tooltip'|translate}}</p>
  <a ng-click="toggleCalendarStartDay()" class="btn btn-{{startSunday ? 'success' : 'info'}}">
    <i class="glyphicon glyphicon-indent-{{startSunday ? 'right' : 'left'}}" ></i> {{startSunday ? 'SETTINGS/CALENDAR/start-mon/btn' : 'SETTINGS/CALENDAR/start-sun/btn'|translate}}
  </a>

  <hr class="setting-divider">

  <h2>
    <span uib-tooltip="{{displayMode == 'date' ? 'SETTINGS/CALENDAR/mode-month/tooltip' : 'SETTINGS/CALENDAR/mode-week/tooltip'|translate}}" tooltip-placement="left">
      <i class="glyphicon glyphicon-{{displayMode == 'date' ? 'calendar alert-success' : 'th-list alert-info'}}"></i>
    </span>
    <li translate-once>SETTINGS/CALENDAR/mode/hdr</li>
  </h2>

  <p translate-once>SETTINGS/CALENDAR/mode/desc</p>
  <p><strong  translate-once>COMMON/current-setting/hdr</strong>
   {{displayMode == 'date' ? 'SETTINGS/CALENDAR/mode-month/tooltip' : 'SETTINGS/CALENDAR/mode-week/tooltip'|translate}}</p>
  <a ng-click="toggleCalendarDisplayMode()" class="btn btn-{{displayMode == 'date' ? 'info' : 'success'}}">
    <i class="glyphicon glyphicon-{{displayMode == 'date' ? 'th-list' : 'calendar'}}"></i> {{displayMode == 'date' ? 'SETTINGS/CALENDAR/mode-week/btn' : 'SETTINGS/CALENDAR/mode-month/btn'|translate}}
  </a>

  <hr class="setting-divider">

  <h2>
    <span uib-tooltip="{{showSpecials ? 'SETTINGS/CALENDAR/specials-show/tooltip' : 'SETTINGS/CALENDAR/specials-hide/tooltip'|translate}}" tooltip-placement="left">
      <i class="glyphicon glyphicon-{{showSpecials ? 'ok alert-success' : 'remove alert-danger'}}"></i>
    </span>
    <li translate-once>SETTINGS/CALENDAR/specials/hdr</li>
  </h2>

  <p translate-once>SETTINGS/CALENDAR/specials/desc</p>
   <p><strong  translate-once>COMMON/current-setting/hdr</strong>
   {{showSpecials ? 'SETTINGS/CALENDAR/specials-show/tooltip' : 'SETTINGS/CALENDAR/specials-hide/tooltip'|translate}}</p>
  <a ng-click="toggleSpecials()" class="btn btn-{{showSpecials ? 'danger' : 'success'}}">
    <i class="glyphicon glyphicon-{{showSpecials ? 'remove' : 'ok'}}" ></i> {{showSpecials ? 'SETTINGS/CALENDAR/specials-hide/btn' : 'SETTINGS/CALENDAR/specials-show/btn'|translate}}
  </a>

  <hr class="setting-divider">

  <h2>
    <span uib-tooltip="{{showDownloaded ? 'COMMON/enabled/lbl' : 'COMMON/disabled/lbl'|translate}}" tooltip-placement="left">
      <i class="glyphicon glyphicon-{{showDownloaded ? 'ok alert-success' : 'remove alert-danger'}}"></i>
    </span>
    <li translate-once>SETTINGS/CALENDAR/downloaded/hdr</li>
  </h2>

  <p translate-once>SETTINGS/CALENDAR/downloaded/desc</p>

   <p><strong  translate-once>COMMON/current-setting/hdr</strong>
   {{showDownloaded ? 'COMMON/enabled/lbl' : 'COMMON/disabled/lbl'|translate}}</p>
  <a ng-click="toggleDownloaded()" class="btn btn-{{showDownloaded ? 'danger' : 'success'}}">
    <i class="glyphicon glyphicon-{{showDownloaded ? 'remove' : 'ok'}}" ></i> {{showDownloaded ? 'COMMON/disable/btn' : 'COMMON/enable/btn'|translate}}
  </a>

  <hr class="setting-divider">

  <h2>
    <span uib-tooltip="{{showEpisodeNumbers ? 'COMMON/enabled/lbl' : 'COMMON/disabled/lbl'|translate}}" tooltip-placement="left">
      <i class="glyphicon glyphicon-{{showEpisodeNumbers ? 'ok alert-success' : 'remove alert-danger'}}"></i>
    </span>
    <li translate-once>SETTINGS/CALENDAR/show-episode-numbers/hdr</li>
  </h2>

  <p translate-once>SETTINGS/CALENDAR/show-episode-numbers/desc</p>

   <p><strong  translate-once>COMMON/current-setting/hdr</strong>
   {{showEpisodeNumbers ? 'COMMON/enabled/lbl' : 'COMMON/disabled/lbl'|translate}}</p>
  <a ng-click="toggleEpisodeNumbers()" class="btn btn-{{showEpisodeNumbers ? 'danger' : 'success'}}">
    <i class="glyphicon glyphicon-{{showEpisodeNumbers ? 'remove' : 'ok'}}" ></i> {{showEpisodeNumbers ? 'COMMON/disable/btn' : 'COMMON/enable/btn'|translate}}
  </a>
</div>
